<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.使用 <audio> 和 <video> 元素
        任务：创建一个网页，使用 <audio> 元素嵌入一个音乐文件，
            并允许用户控制播放、暂停和音量调节。 任务：使用 <video> 元素嵌入一个视频文件，并添加全屏播放功能。 -->
    <audio controls>  
        <source src="your-music-file.mp3" type="audio/mpeg">  
        Your browser does not support the audio element.  
      </audio>  

      <!-- 2.使用 <canvas> 元素
        任务：使用 <canvas> 元素绘制一个简单的动画，比如一个移动的方块。 
            任务：创建一个简单的绘图应用，允许用户在画布上绘制线条和形状。 -->
    <video controls>  
        <source src="your-video-file.mp4" type="video/mp4">  
        Your browser does not support the video tag.  
      </video>  

    <!-- 3.使用 <details> 和 <summary> 元素
      任务：创建一个 FAQ 页面，使用 <details> 和 <summary> 元素来组织问题和答案，使其可以折叠和展开。 -->
    <details>  
        <summary>问题 1: 什么是HTML?</summary>  
        <p>HTML 是超文本标记语言，用于创建网页。</p>  
      </details>  
        
      <details>  
        <summary>问题 2: 什么是CSS?</summary>  
        <p>CSS 是层叠样式表，用于控制网页的布局和样式。</p>  
      </details>       

      <!-- 4.使用 <figure> 和 <figcaption> 元素
      任务：创建一个包含图片和标题的页面，使用 <figure> 和 <figcaption> 元素来组织内容。 -->
        <figure>  
            <img src="your-image.jpg" alt="示例图片">  
            <figcaption>示例图片的标题</figcaption>  
          </figure>  
    
</body>
</html>